import React from 'react';
import {observer} from "mobx-react";
import { withRouter } from 'react-router-dom';
import { ListView, SearchBar,Icon,Avatar,Tools } from 'weaver-mobile';
import  * as DisApi from "../../api/MyBlogApi";
import '../../style/shareTool.less'

const getLabel = Tools.getLabel;
@withRouter
@observer
export  default class ShowCheckUserList extends React.Component {
    constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        });

        this.state = {
            dataSource
        };
    }

    componentDidMount() {

        DisApi.checkUserList({blogId:this.props.location.query.discussid}).then(result => {

            console.log(result);

            if(result.shareType=="3"){
                this.setTitle(getLabel(525741,'可见人员'));
            }else {
                this.setTitle(getLabel(525742,'不可见人员') );
            }

            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(result.ulist)
            })
        })


    }

    setTitle = (title) => {

        if (window.em && (typeof window.em.checkJsApi === 'function') && window.em.checkJsApi('changeTitle')) {
            window.em.changeTitle({ title });
        }
        window.document.title = title;
    }

    onSearchChange = (val) => {

        DisApi.checkUserList({blogId:this.props.location.query.discussid,searchValue:val}).then(result => {
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(result.ulist)
            })
        })



    }

    render() {

        const row = (rowData, sectionID, rowID) => {
            return (
                <div key={rowID} className='checkHrmItemInfo'>
                        <Avatar userId={rowData.id} />
                        <div className='itemDataOne'><span  className='itemName'>{rowData.name}</span><span className='itemDept'>{rowData.subTitle}</span></div>
                        <div className='itemDataTwo'><span  className='itemName'>{rowData.jobTitle}</span><span className='itemDept'>{rowData.deptTitle}</span></div>
                </div>
            );
        };
        let {dataSource,isLoading} = this.state;
        return (
            <div style={{"padding":"0px 0px 0px 11px"}}>
                <div className="customHrmSearch">
                    <SearchBar
                        className="search-select"
                        placeholder="Search"
                        onSubmit={this.onSearchChange}
                        extraButton={[
                            { key: 'advanced', show: <Icon key="filter-o" type="filter-o" /> }
                        ]}
                    />

                </div>
                <div className='customHrmItemBody'>
                    <ListView
                        ref={el => this.lv = el}
                        dataSource={dataSource}
                        renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
                            {isLoading ? 'Loading...' : ''}
                        </div>)}
                        renderRow={row}
                        className="am-list"
                        pageSize={10}
                        style={{"height":"calc(100vh - 100px)"}}
                        scrollRenderAheadDistance={500}
                    />
                </div>
            </div>
        );
    }
}
